<template>
  <div class="flex justify-between p-18 align-center">
    <div>
      <p class="text-4xl">您好</p>
      <h2 class="text-6xl mt-4">万峰互联科技</h2>
    </div>
    <i class="text-9xl iconfont icon-a-001_tongzhi text-gray"></i>
  </div>
  <!-- 轮播 -->
  <div class="p-16 banner">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/1.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/2.png" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 宫格 -->
  <van-grid :border="false">
    <van-grid-item
      v-for="value in cateList"
      :key="value.objectId"
      :icon="value.icon"
      :text="value.name"
    />
    <van-grid-item :icon="more" text="更多" />
  </van-grid>
  <div class="p-16 hot-cont" ref="hotRef">
    <div class="flex" :style="{ width: `${listWidth}rem` }" ref="content">
      <job-item v-for="item in jobList" :job-data="item" hot />
    </div>
  </div>
  <div class="line-cont">
    <div class="line" :style="{ transform: `translateX(${move}px)` }"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import { jobGet, categoryGet } from "../api/pro";
import { JobType, CategoryType } from "../types/pro";
import BScroll from "@better-scroll/core";
import more from "../assets/img/home_grid5.png";

const jobList = ref<Array<JobType>>([]);
const hotRef = ref<HTMLDivElement | null>(null); //容器
const content = ref<HTMLDivElement | null>(null); //内容
const move = ref<number>(0);
jobGet().then((res) => {
  jobList.value = res.data.results;
  // 注意BScroll的执行时机，必须等到跟滚动相关的所有DOM渲染后才能正常控制滚动
  nextTick(() => {
    let el = hotRef.value as HTMLDivElement;
    let hotWidth = (hotRef.value as HTMLDivElement).offsetWidth;
    let contWidth = (content.value as HTMLDivElement).offsetWidth;
    console.log(hotWidth, contWidth);
    let max = contWidth - hotWidth; //最大滚动距离
    //初始化better-scroll
    let bs = new BScroll(el, {
      // ...... 详见配置项
      scrollX: true, //开启横向滚动
      probeType: 3, //实时派发scroll事件
      mouseWheel: true, //开启鼠标滚轮
      disableMouse: false, //启用鼠标拖动
      disableTouch: false, //启用手指触摸
    });
    bs.on("scroll", (position: { x: number }) => {
      console.log(position.x); //内容实时滚动距离
      move.value = -(position.x / max) * 80; //指示器的实时滚动距离
    });
  });
});
//计算横向滚动列表宽度
const listWidth = computed(() => {
  return jobList.value.length * 34.4;
});

//分类宫格
const cateList = ref<CategoryType[]>([]);
categoryGet().then((res) => {
  cateList.value = res.data.results;
});
</script>

<style lang="scss" scoped>
.hot-cont {
  overflow: hidden;
}
.line-cont {
  width: 100px;
  height: 6px;
  background-color: #999;
  margin: auto;
  overflow: hidden;
  .line {
    width: 20px;
    height: 100%;
    background-color: orange;
  }
}
.banner {
  img {
    height: 32rem;
    width: 100%;
    object-fit: cover;
  }
}
</style>
